<template>
  <!--    外部这里新增加一个div-->
  <div class="progress-container">
    <div
      style="
        position: absolute;
        width: 100px;
        height: 100px;
        border: 2px solid #00f6ff;
        border-radius: 50%;
      "
    ></div>
    <svg class="progress-svg" width="200" height="200">
      <circle
        ref="progressCircle"
        class="progress-bar"
        cx="100"
        cy="100"
        :r="radius"
        fill="transparent"
        stroke="#4470a3"
        stroke-width="15"
      />
      <circle
        ref="progressCircle"
        class="progress-bar"
        cx="100"
        cy="100"
        :r="radius"
        fill="transparent"
        stroke="#00f6ff"
        stroke-width="15"
        stroke-linecap="round"
        :stroke-dasharray="dashArray"
        :stroke-dashoffset="dashOffset"
      />
    </svg>
    <!-- 默认是85分的文本 -->
    <div class="scoreText">{{ aiReportScore }}</div>
  </div>
</template>

<script>
// 引入动画库
import { ref, watch } from 'vue'
import gsap from 'gsap'

export default {
  name: 'processEar',
  props: {
    percent: {
      type: Number,
      default: 1
    }
  },
  setup(props) {
    const radius = 80 // 圆的半径
    let aiReportScore = ref()

    // 计算 stroke-dasharray 和 stroke-dashoffset 的值
    let circumference = 2 * Math.PI * radius // 圆的周长
    const dashArray = `${circumference} ${circumference}`
    const dashOffset = ref(circumference) // 初始值等于周长，表示0%的进度
    let startOffset = ref(circumference)

    watch(
      () => props.percent,
      () => {
        let percent = (circumference * props.percent) / 100
        gsap.to(startOffset, {
          value: circumference - percent,
          duration: 2, // 动画持续时间（秒）
          ease: 'power1.in',
          onUpdate: () => {
            // 在动画更新时更新数值数据
            aiReportScore.value = calculateProgress(startOffset.value, circumference)
            dashOffset.value = startOffset.value
          },
          onComplete: () => {
            // 动画完成后的回调函数
            // console.log('圆形进度条动画完成');

            startOffset.value = circumference
          }
        })
      }
    )

    // 计算进度百分比的函数
    const calculateProgress = (offset, total) => {
      const progress = 100 - (offset / total) * 100
      return progress.toFixed(0) // 保留两位小数
    }

    return {
      radius,
      dashArray,
      dashOffset,
      aiReportScore
    }
  }
}
</script>

<style scoped>
.progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  justify-content: center;
}

.progress-svg {
  width: 200px;
  height: 200px;
  transform: rotate(90deg);
}

.progress-bar {
  /*transition: stroke-dashoffset 0.3s;*/
}

.scoreText {
  position: absolute;
  /*top: -106px;*/
  /*right: -70px;*/
  font-size: 30px;
  color: #00f6ff;
  border-style: hidden;
}
</style>
